<template>
  <div>
    <a-row justify="space-between" style="margin-right: 20px">
      <a-col :span="6" class="col-item-center">
        <a-form-item
          :label="$t('ui.listView.ruleName')"
          class="input-item"
          style="flex: 1"
        >
          <a-input v-model="name" placeholder="" />
        </a-form-item>
      </a-col>
      <a-col :span="6" class="col-item-center">
        <a-form-item
          :label="$t('ui.listView.description')"
          class="input-item"
          style="flex: 1"
        >
          <a-input v-model="desc" placeholder="" />
        </a-form-item>
      </a-col>
      <a-col :span="6" class="col-item-center">
        <a-form-item
          :label="$t('ui.listView.serviceCalls')"
          class="input-item"
          style="flex: 1"
        >
          <a-input v-model="callNo" placeholder="" />
        </a-form-item>
      </a-col>
      <a-col v-if="isExpanded" :span="6" class="col-item-center">
        <a-form-item
          :label="$t('ui.listView.status')"
          class="input-item"
          style="flex: 1"
        >
          <a-input v-model="status" placeholder="" />
        </a-form-item>
      </a-col>
      <a-col v-if="isExpanded" :span="6" class="col-item-center">
        <a-form-item
          :label="$t('ui.listView.lastScheduledTime')"
          class="input-item"
          style="flex: 1"
        >
          <a-input v-model="updatedAt" placeholder="" />
        </a-form-item>
      </a-col>

      <a-col :span="6" class="col-item-end">
        <a-button @click="reset">{{ $t("ui.listView.reset") }}</a-button>
        <a-button type="primary" @click="query" style="margin-left: 8px">{{
          $t("ui.listView.query")
        }}</a-button>
        <a-button type="text" @click="toggleExpand" style="margin-left: 8px">
          <span>
            {{
              isExpanded ? $t("ui.listView.collapse") : $t("ui.listView.expand")
            }}
            <span v-if="!isExpanded"><DownOutlined /></span>
            <span v-else><UpOutlined /></span>
          </span>
        </a-button>
      </a-col>
    </a-row>

    <!-- e-table 组件展示 -->
    <a-table
      :columns="columns"
      :data-source="mockingData"
      rowKey="name"
      style="margin-top: 20px"
      :pagination="pagination"
      @change="onPageChange"
    >
      <!-- <template #headerCell="{ column }">
        <template v-if="column.key === 'name'">
          <span>
            <smile-outlined />
            {{ $t("ui.listView.ruleName") }}
          </span>
        </template>
      </template> -->

      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'name'">
          <a>
            {{ record.name }}
          </a>
        </template>
        <template v-else-if="column.key === 'desc'">
          <span>
            {{ record.desc }}
          </span>
        </template>
        <template v-else-if="column.key === 'callNo'">
          <span>
            {{ record.callNo }}
          </span>
        </template>
        <template v-else-if="column.key === 'status'">
          <span>
            {{ record.status }}
          </span>
        </template>
        <template v-else-if="column.key === 'updatedAt'">
          <span>
            {{ record.updatedAt }}
          </span>
        </template>
        <template v-else-if="column.key === 'action'">
          <span>
            <a-button @click="edit(record as MockingData)">{{
              $t("ui.listView.edit")
            }}</a-button>
            <a-divider type="vertical" />
            <a-button danger @click="deleteLine(record as MockingData)">{{
              $t("ui.listView.delete")
            }}</a-button>
            <a-divider type="vertical" />
            <a class="ant-dropdown-link">
              {{ $t("ui.listView.moreActions") }}
              <down-outlined />
            </a>
          </span>
        </template>
      </template>
    </a-table>

    <!-- 当数据较少时可选用，防止一直显示分页 -->
    <!-- <a-pagination
      v-if="mockingData.length > 0"
      :current="currentPage"
      :page-size="pageSize"
      :total="totalItems"
      @change="onPageChange"
      style="margin-top: 20px; text-align: right;"
    /> -->
  </div>
</template>

<script lang="ts">
import { onMounted, ref, computed } from "vue";
import { useI18n } from "vue-i18n";
import {
  Row,
  Col,
  FormItem,
  Input,
  Button,
  Table,
  Divider,
} from "ant-design-vue";
import { DownOutlined, UpOutlined } from "@ant-design/icons-vue";
import axios from "axios";
import { MockingData } from "@/types/mockTypes";
import {
  TablePaginationConfig,
  // FilterValue,
  // SorterResult,
  // TableCurrentDataSource,
} from "ant-design-vue/es/table/interface";
export default {
  components: {
    ARow: Row,
    ACol: Col,
    AFormItem: FormItem,
    AInput: Input,
    AButton: Button,
    ATable: Table,
    ADivider: Divider,
    // APagination: Pagination,
    DownOutlined,
    UpOutlined,
    // SmileOutlined,
  },
  setup() {
    const { t } = useI18n(); // 使用 useI18n 钩子
    const name = ref("");
    const desc = ref("");
    const callNo = ref("");
    const status = ref("");
    const updatedAt = ref("");
    const isExpanded = ref(false);
    const mockingData = ref<MockingData[]>([]);

    // Pagination
    const totalItems = ref(0);
    const currentPage = ref(1);
    const pageSize = ref(20);

    const columns = [
      {
        title: () => t("ui.listView.ruleName"), // 使用 t 进行国际化
        dataIndex: "name",
        key: "name",
      },
      {
        title: () => t("ui.listView.description"), // 使用 t 进行国际化
        dataIndex: "desc",
        key: "desc",
      },
      {
        title: () => t("ui.listView.serviceCalls"), // 使用 t 进行国际化
        dataIndex: "callNo",
        key: "callNo",
      },
      {
        title: () => t("ui.listView.status"), // 使用 t 进行国际化
        dataIndex: "status",
        key: "status",
      },
      {
        title: () => t("ui.listView.lastScheduledTime"), // 使用 t 进行国际化
        dataIndex: "updatedAt",
        key: "updatedAt",
      },
      {
        title: () => t("ui.listView.operation"), // 使用 t 进行国际化
        key: "action",
      },
    ];

    const reset = () => {
      name.value = "";
      desc.value = "";
      callNo.value = "";
      status.value = "";
      updatedAt.value = "";
    };

    const query = () => {
      console.log("查询条件:", {
        name: name.value,
        desc: desc.value,
        callNo: callNo.value,
        status: status.value,
        updatedAt: updatedAt.value,
      });
    };

    const toggleExpand = () => {
      isExpanded.value = !isExpanded.value;
    };

    const pagination = computed(() => ({
      total: totalItems.value,
      current: currentPage.value,
      pageSize: pageSize.value,
      showSizeChanger: true, // 是否显示每页条数切换器
      showQuickJumper: true, // 是否允许快速跳转
      showTotal: (total: number, range: [number, number]) =>
        `${t("ui.pagination.showTotalPrefix")} ${range[0]}-${range[1]} ${t(
          "ui.pagination.showTotalSuffix"
        )} ${total} ${t("ui.pagination.showTotalSuffixEnd")}`, // 使用 t 进行国际化
    }));

    const getMockingList = async (page: number) => {
      try {
        const response = await axios.get("/mock/mockList");
        // console.log(response.data.data.data);
        // const response = await axios.get(`/mock/mockList?page=${page}&pageSize=${pageSize.value}`);
        mockingData.value = response.data.data.data;
        totalItems.value = response.data.data.total; // 假设返回的数据包含 total 字段
        // 更新当前页
        // currentPage.value = response.data.data.current;
      } catch (error) {
        console.error("获取mock数据时发生错误:", error);
      }
    };

    const edit = (record: MockingData) => {
      console.log("编辑:", record);
    };

    const deleteLine = (record: MockingData) => {
      console.log("删除:", record);
    };

    const onPageChange = (
      pagination: TablePaginationConfig
      // filters: Record<string, FilterValue>,
      // sorter: SorterResult<any> | SorterResult<any>[],
      // extra: TableCurrentDataSource<any>
    ) => {
      const page = pagination.current || 1; // 获取当前页码
      console.log(`pagination.current = ${pagination.current}`);
      currentPage.value = page;
      getMockingList(page); // 调用获取数据的方法
    };

    onMounted(() => {
      getMockingList(1);
    });

    return {
      name,
      desc,
      callNo,
      status,
      updatedAt,
      isExpanded,
      mockingData,
      totalItems,
      currentPage,
      pageSize,
      reset,
      query,
      toggleExpand,
      edit,
      deleteLine,
      columns,
      onPageChange,
      pagination,
    };
  },
};
</script>

<style scoped>
.col-item-center {
  display: flex;
  align-items: center;
}
.col-item-end {
  display: flex;
  justify-content: flex-end;
  padding: 0px 20px;
}
.input-item {
  display: flex;
  align-items: center;
  padding: 0px 20px;
}

.input-item label {
  width: 110px;
  text-align: right;
  margin-right: 10px;
}
</style>
